'use client';
import { WebGL, WebGLDataModel } from '@/pao/webGL';
import { css } from '@emotion/css';
import { Button } from 'antd';

interface ColorData {
	r: number;
	g: number;
	b: number;
}

interface RotateData {
	x: number;
	y: number;
	z: number;
}

const dataModel = new WebGLDataModel().setProps({
	buildUrl: "WebGL",
	productName: 'DreamHouse',
	productVersion: '1.0',
});
export default function Page() {

	return <div className={css`display: flex; flex-direction: column; flex: auto; align-items: stretch;`}>
			<div>
				<Button onClick={()=>{
					const colorData: ColorData = { r: Math.random(), g: Math.random(), b: Math.random() };
					dataModel.sendToUnity({
						objectName: 'WebInterface',
						action: 'SetColor',
						data: colorData
					})
				}}>设置颜色</Button>
				<Button onClick={()=>{
					const rotateData: RotateData = { x: Math.random(), y: Math.random(), z: Math.random() };
					dataModel.sendToUnity({
						objectName: 'WebInterface',
						action: 'SetRotate',
						data: rotateData
					})
				}}>设置旋转</Button>
			</div>
			{dataModel.render()}
		</div>;
};